import { useNavigate } from 'react-router-dom'
import {useEffect, useState} from 'react'
import {Button, Checkbox, Form, Input, message} from "antd";
import { passwordLogin } from '@/api/login.ts'
import userStore from '@/store/userStore.ts'
import md5 from "@/utils/md5.ts";
import {ETabItemKey} from '@/views/Login/index.tsx'
import styles from "@/views/Login/login.module.scss";

interface IForm {
    email: string
    password: string
}
interface IProps {
    change: (key: ETabItemKey) => void
}
const Login = ({ change }: IProps) => {
    const [form] = Form.useForm();
    const navigate = useNavigate()
    const [remember, setRemember] = useState(true)
    const [initForm, setInitForm] = useState<IForm>({ email: '834526069@qq.com', password: md5('123456')})
    const onFinish = async (values: IForm) => {
        const data = { email: values.email, password: initForm.email === values.email && initForm.password === values.password ? values.password : md5(values.password) }
        const response = await passwordLogin(data)
        if (response.code === 200) {
            message.success('登录成功')
            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
            remember && localStorage.setItem(import.meta.env.VITE_REMEMBER_EMAIL, JSON.stringify(data))
            localStorage.setItem(import.meta.env.VITE_MANAGE_TOKEN, response.data.token)
            userStore.change(response.data.info)
            navigate('/dashboard/workplace')
        } else {
            message.error(response.data.msg)
        }
    }
    const changeRemember = (e: { target: { checked: boolean } }) => {
        setRemember(e.target.checked)
    }
    useEffect(() => {
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
        localStorage.getItem(import.meta.env.VITE_REMEMBER_EMAIL) && setInitForm(JSON.parse(localStorage.getItem(import.meta.env.VITE_REMEMBER_EMAIL) as string) as IForm)
    }, []);
    useEffect(() => {
        form.setFieldsValue(initForm)
    }, [initForm]);
    return (
        <>
            <h1 style={{fontWeight: 700, marginBottom: '12px', color: '#FFF'}}>欢迎回来</h1>
            <div className={styles.info} style={{color: '#A1A1A1', marginBottom: '28px'}}>请输入您的帐户密码登录</div>
            <Form form={form} onFinish={onFinish} initialValues={initForm}>
                <Form.Item name='email' label={<span style={{color: '#FFF', fontWeight: 'bold'}}>邮箱</span>}
                           rules={[{required: true, message: '请输入邮箱'}]}>
                    <Input />
                </Form.Item>
                <Form.Item name='password' label={<span style={{color: '#FFF', fontWeight: 'bold'}}>密码</span>}
                           rules={[{required: true, message: '请输入密码'}]}>
                    <Input.Password />
                </Form.Item>
                <Form.Item>
                    <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                        <div>
                            <Checkbox defaultChecked={remember} onChange={changeRemember} />
                            <span style={{color: '#FFF', marginLeft: '8px'}}>记住账号</span>
                        </div>
                        <div style={{color: '#006BE6'}}>
                            <span style={{cursor: 'pointer'}} onClick={() => change(ETabItemKey.reset)}>忘记密码?</span>
                        </div>
                    </div>
                </Form.Item>
                <Form.Item>
                    <Button style={{width: '100%'}} htmlType="submit" type='primary'>登录</Button>
                </Form.Item>
            </Form>
            <div style={{textAlign: 'center'}}>
                <span style={{ color: '#FFF' }}>还没有账号?</span>
                <span style={{marginLeft: '10px', cursor: 'pointer', color: '#006BE6'}} onClick={() => change(ETabItemKey.register)}>创建账号</span>
            </div>
        </>
    )
}

export default Login